<template>
        <div class="daoBot">
        <div class="daoBotTop">
            <el-input placeholder="请输入地区" v-model="inputText" clearable></el-input>
            <el-button type="primary" @click="searchFun">搜索</el-button>
            <el-button type="primary" @click="returnFun">重置</el-button>
        </div>
        <div class="daoBotMid">
            <template>
            <el-table ref="multipleTable" :data="mapData"    @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" header-align="center" align="center"  ></el-table-column>
                <el-table-column label="地区"  header-align="center" align="center"  width="120">
                <template slot-scope="scope">{{ scope.row.position }}</template>
                </el-table-column>

                <el-table-column prop="address"  header-align="center" align="center"  label="地址" width="320" show-overflow-tooltip></el-table-column>
                
                <el-table-column prop="phone1" header-align="center" align="center"  width="150" label="预约电话"></el-table-column>

                <el-table-column prop="phone2"  header-align="center" align="center" width="150"  label="资讯电话"></el-table-column>

                <el-table-column prop="bus"  header-align="center" align="center"  label="公交"></el-table-column>

                <el-table-column prop="time"  header-align="center" align="center" width="200" label="操作时间"></el-table-column>

                <el-table-column header-align="center" align="center"  label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="changeArr(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle size="mini" @click="handleDelete(scope.row.id)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            </template>
        </div>
        <div class="daoBotBot">
            <el-pagination 
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange" 
            :current-page="page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </div>
        </div>
</template>

<script>
import {delById,delAll} from '../../../api/hosp'
import eventBus from '../../../utils/busEvent'
export default {
    props:['mapData','page','pagesize','total'],
    data () {
        return {
            inputText: '',
            multipleSelection: [],        
        }
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.$emit('pageSizeChange',val);
        },
        handleCurrentChange(val) {
            this.$emit('pageChange',val)
        },
        handleDelete(id) {
            delById({id:id}).then(res=>{
                if(res.code==200){
                    this.$emit('resetTable')
                }
            })
        }, 
        deleteAll(){
            let ids=''
            this.multipleSelection.forEach(item=>{
                ids+=item.id + ','
            })
            delAll({ids:ids}).then(res=>{
                if(res.code==200){
                    this.$emit('resetTable')
                }
            })
        },
        searchFun(){
            this.$emit('searchFun',this.inputText)
        },
        returnFun(){
            this.inputText=''
            this.$emit('searchFun',this.inputText)
        },
        changeArr(row){
            this.$emit('changeArr',row)
        }
    },
    mounted () {
        eventBus.$on('deleteAll',this.deleteAll) //批量删除
    }
}
</script>

<style scoped lang="less">
    .daoBotTop>.el-input{
    width: 250px;
    margin-right: 10px;
}
    .daoBotTop>.el-button{
    background: rgb(0, 110, 255);
    height: 25px;
    line-height: 5px;
    }
    .daoBot{
    flex: 1;
    background: rgb(255, 255, 255);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 1px 1px 5px #999;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    }
    .daoBotTop{
        height: 50px;
        display: flex;
        align-items: center;
    }
    .daoBotMid{
        flex: 1;
    }

    .daoBotBot{
        height: 50px;
    }
    .el-table{
        border: 1px solid rgb(235, 238, 245);
    }
    /deep/.el-table__header tr,
    /deep/.el-table__header th {
        padding: 0;
        box-sizing: border-box;
        border: 1px solid rgb(235, 238, 245);
        font-size: 20px;
        color: black;
        letter-spacing:10px;
        line-height: 70px;

    }
    /deep/.el-table__body tr,
    /deep/.el-table__body td {
        padding: 0;
        height: 50px;
        border: 1px solid rgb(235, 238, 245);

    }
</style>